<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../org/angular.min.js"></script>
    <script src="../org/angular-ui-router.min.js"></script>
    <script src="../org/jquery.min.js"></script>
</head>

<body>
   <div>
     <a href="" ui-sref='home'>首页</a>
    <a href="/lists">列表页</a>
    <!-- 显示对应的页面占位符号 -->
    <div ui-view>你访问的页面不存在</div>
   </div>
    <script>
          var m = angular.module('hd',['ui.router']);
          m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
             //设置默认路由
             $urlRouterProvider.otherwise('');
             //定义路由规则
             $stateProvider.state('default',{
                 url: '',
                 template: '<h1></h1>'
             })
             .state('home',{
                 url: '/home',
                 templateUrl: 'view/home',
                 controller:['$scope',function($scope){
                     
                 }]
             })
             .state('lists',{
                 url: '/lists',
                 template: '<h1>列表页</h1>',
                 controller: 'ctrl'
             })
          }])
          m.controller('ctrl',['$scope',function($scope){
              $scope.name='向军';
              $scope.data=[
                  {name: 'aaa'},
                  {name: 'aaa'}
              ]
          }])
    </script>

</body>

</html>